<template>
  <div class="search-box">
    <input
      id="search"
      type="text"
      placeholder="请输入城市名称"
      autocomplete="off"
      v-model="city"
      @input="code"
    />
    <div class="holder" @click="page"></div>
    <div class="list" v-for="item in storageformation" :key="item.reporttime">
      <div class="weather">
        <h3>{{ item.city }}</h3>
        <span>{{ item.temperature }}度</span>
      </div>
      <a @click="page">查看</a>
      <a @click="del">删除</a>
    </div>

    <h2 id="tip">暂时没有保存过城市天气信息，请查询后点击右上角"+"号保存。</h2>
    <!-- 遍历出来城市天气-->
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'SearchBox',
  data() {
    return {
      city: '',
      adcode: '',
      index: '',
      // tmp: '',
      storageformation: '',
    }
  },
  mounted() {
    const a = JSON.parse(localStorage.getItem('mainFormation'))
    // console.log(a)
    this.storageformation = a
    this.act()
  },

  methods: {
    code() {
      axios({
        url:
          'https://restapi.amap.com/v3/geocode/geo?address=' +
          this.city +
          '&key=b36dd440f158868263e0266de8cc36b8',
        method: 'GET',
      })
        .then((res) => {
          // console.log(document.querySelector('.holder').style.display)
          document.querySelector('.holder').style.display = 'block'
          if (res.data.status == 0) {
            console.log(document.querySelector('.holder').innerHTML)
            document.querySelector('.holder').innerHTML =
              '似乎没有找到你查找的城市'
          } else {
            this.adcode = res.data.geocodes[0].adcode
            document.querySelector('.holder').innerHTML =
              res.data.geocodes[0].city
          }
        })
        .then(() => {
          axios({
            url: `https://restapi.amap.com/v3/weather/weatherInfo?city=${this.adcode}&key=c1c27e86c20cb27cf046701bbd2d7d5b&extensions=base`,
            method: 'GET',
          }).then((res) => {
            // console.log(res)
            // this.tmp = res.data.lives[0].temperature
          })
        })
    },
    page(e) {
      if (this.city) {
        localStorage.setItem('currentcity', this.city)
        localStorage.setItem('currentcode', this.adcode)
        this.$router.push('/city')
      } else {
        console.log(e.target.parentNode.childNodes[0].childNodes[0].innerHTML)
        // 得到城市的名字
        const cityname =
          e.target.parentNode.childNodes[0].childNodes[0].innerHTML
        this.city = cityname
        localStorage.setItem('currentcity', this.city)
        // 根据名字得到当前adcode并放到localstorage
        axios({
          url:
            'https://restapi.amap.com/v3/geocode/geo?address=' +
            this.city +
            '&key=c1c27e86c20cb27cf046701bbd2d7d5b',
          method: 'GET',
        }).then((res) => {
          this.adcode = res.data.geocodes[0].adcode
          localStorage.setItem('currentcode', this.adcode)
          this.$router.push('/city')
        })
      }
    },
    del(e) {
      // 得到当前点击item的城市名
      const cityname = e.target.parentNode.childNodes[0].childNodes[0].innerHTML
      console.log(cityname)
      // 遍历local里mainFormation,找出点击的这一项在mainFormation里的index
      // 得到main数组
      const arr = JSON.parse(localStorage.getItem('mainFormation'))
      // console.log(arr)
      const ind = arr.filter((item) => item.city == cityname)
      // console.log(ind)
      // // 利用index删除
      const index = arr.indexOf(ind[0])
      console.log(index)

      if (index == 0) {
        localStorage.removeItem('mainFormation')
        this.index = 0
        localStorage.removeItem('active')
        localStorage.setItem('avtive', '')

        location.reload()
      } else {
        const Arr = arr.splice(index, 1)
        localStorage.setItem('mainFormation', JSON.stringify(Arr))
        location.reload()
      }
    },
    act() {
      const act = localStorage.getItem('active')
      // console.log(act)
      if (act == 'false') {
        console.log(document.querySelector('#tip'))
        document.querySelector('#tip').style.display = 'none'
      }
      if (act == '') {
        document.querySelector('#tip').style.display = 'block'
      }
    },
  },
}
</script>

<style scope>
.search-box {
  width: 80%;
  margin: 20px auto;
  text-align: center;
  /* background-color: cyan; */
}
.search-box h2 {
  padding: 35px 0 10px 0;
}

.search-box ::-webkit-input-placeholder {
  font-size: 16px;
  color: lightgray;
  opacity: 0.6;
}

.search-box .holder {
  display: none;
  margin-top: -20px;
  padding-left: 15px;
  height: 40px;
  text-align: left;
  background-color: #014e70;
  line-height: 40px;
  cursor: pointer;
}

.search-box .list {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 40px;
  margin-block: 20px;
}
.search-box #search:focus {
  border: none;
  appearance: none;
  box-shadow: 0 2px 1px 1px rgba(0, 0, 0, 0.1);
}
.search-box .list a {
  /* display: none; */
  width: 80px;
  height: 40px;
  margin-left: 8px;
  /* padding: 10px 23px; */
  font-size: 17px;
  color: #fff;
  background-color: #eab308;
  /* box-sizing: border-box; */
  line-height: 40px;
  cursor: pointer;
}
.search-box .list .weather {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 40px;
  padding: 8px 16px;
  font-size: 16px;
  background-color: #014e70;
  box-sizing: border-box;
  transition: width 0.3s ease;
}
.search-box .list:hover a {
  display: block;
}

.search-box .list:hover .weather {
  width: 80%;
  transition: width 0.3s ease;
  margin-right: 50px;
}
.search-box #search {
  width: 100%;
  height: 40px;
  margin-bottom: 20px;
  font-size: 16px;
  color: #fff;
  background: transparent;
  border: none;
  outline: none;
  border-bottom: 1px solid #fff;
  box-sizing: border-box;
}
</style>
